<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、是什么</h2>
  <div>Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局 【 容器中默认存在两条轴，主轴和交叉轴 】</div>
  <h2>二、属性</h2>
  <div>容器属性有：</div>
  <ul>
    <li>flex-direction决定主轴的方向： flex-direction: row | row-reverse | column | column-reverse;</li>
    <li>flex-wrap：是否可换行。flex-wrap: nowrap | wrap | wrap-reverse;</li>
    <li>flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 flex-flow: <flex-direction> || <flex-wrap>;</li>
    <li>justify-content：主轴上的对齐方式。justify-content: flex-start | flex-end | center | space-between | space-around;</li>
    <li>align-items：交叉轴上如何对齐。align-items: flex-start | flex-end | center | baseline | stretch;</li>
    <li>align-content：定义了多根轴线的对齐方式。 align-content: flex-start | flex-end | center | space-between | space-around | stretch;</li>
  </ul>
  <br>
  <div>容器成员属性如下：</div>
  <ul>
    <li>order。定义项目的排列顺序。数值越小，排列越靠前，默认为0</li>
    <li>flex-grow。定义项目的放大比例</li>
    <li>flex-shrink。定义了项目的缩小比例</li>
    <li>flex-basis。元素在主轴上的初始尺寸（大小）</li>
    <li>flex。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto</li>
    <li>align-self。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性</li>
  </ul>
</body>
</html>